<template>
	<transition name="fade">
		<div v-show="show" class="alert">
			<el-alert :title="title" :type="type" center show-icon :closable="false" />
		</div>
	</transition>
</template>

<script setup>
defineProps({
	title: {
		type: String,
		required: true
	},
	type: {
		type: String,
		default: "primary"
	},
	show: {
		typeof: Boolean,
		default: false
	}
})
</script>

<style scoped>
.alert {
	opacity: 0.9;
	height: 50px;
	overflow: hidden;
}
.fade-enter-active, .fade-leave-active {
	transition: all 0.7s ease;
}
.fade-enter-from, .fade-leave-to {
	height: 0;
	opacity: 0.0;
}
</style>